<template>
    <div class="polar-bar space-full">
      <div class="polar-bar-one"></div>
      <div class="polar-bar-two"></div>
      <div class="polar-bar-three"></div>
      <div class="polar-bar-four"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'PolarBar',
  mounted () {
    this.setChart1()
    this.setChart2()
    this.setChart3()
    this.setChart4()
    window.addEventListener('resize', () => {
      echarts.init(document.querySelector('.polar-bar-one')).resize()
      echarts.init(document.querySelector('.polar-bar-two')).resize()
      echarts.init(document.querySelector('.polar-bar-three')).resize()
      echarts.init(document.querySelector('.polar-bar-four')).resize()
    })
  },
  methods: {
    setChart1 () {
      const tempData = [{
        value: 25, name: '资源加工工业'
      }, {
        value: 40, name: '轻纺工业'
      }, {
        value: 50, name: '机械电子制造业'
      }, {
        value: 12, name: '其他'
      }, {
        value: 30, name: '计算机'
      }]
      const tempColor = ['#9EF869', '#7D3AF7', '#2BFDF6', '#FDC445', '#218FFD']
      const option = {
        backgroundColor: 'black',
        title: {
          text: '实现圆角环形图从外到内渲染1',
          left: 'center',
          top: '4%',
          textStyle: {
            fontSize: 20,
            color: '#fff'
          }
        },
        angleAxis: {
          type: 'value',
          clockwise: false,
          min: 0,
          max: 70,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          data: [],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        polar: {
          center: ['50%', '53%'],
          radius: [80 - tempData.length * 10 + '%', '80%']
        },
        series: [],
        legend: {
          right: '5%',
          top: 'center',
          icon: 'circle',
          orient: 'vertical',
          itemHeight: 10,
          show: true,
          data: [],
          selectedMode: false,
          textStyle: {
            color: '#ccc',
            fontSize: 15
          }
        }
      }
      tempData.forEach((item, index) => {
        option.series.push({
          type: 'bar',
          barWidth: '30%',
          data: tempData.map((subItem, subIndex) => {
            if (subIndex === index) return subItem.value
            else return 0
          }),
          coordinateSystem: 'polar',
          name: item.name,
          stack: 'a',
          roundCap: true,
          itemStyle: {
            color: tempColor[index + (tempColor.length - tempData.length)]
          },
          showBackground: true,
          backgroundStyle: {
            color: '#27333F'
          }
        })
        option.radiusAxis.data.unshift(item.name)
        option.legend.data.unshift(item.name)
      })
      const myChart1 = echarts.init(document.querySelector('.polar-bar-one'))
      myChart1.setOption(option)
    },
    setChart2 () {
      const tempData = [{
        value: 25, name: '资源加工工业'
      }, {
        value: 40, name: '轻纺工业'
      }, {
        value: 50, name: '机械电子制造业'
      }, {
        value: 12, name: '其他'
      }]
      const tempColor = ['#9EF869', '#7D3AF7', '#2BFDF6', '#FDC445', '#218FFD']
      const option = {
        backgroundColor: 'black',
        title: {
          text: '实现圆角环形图从外到内渲染2',
          left: 'center',
          top: '4%',
          textStyle: {
            fontSize: 20,
            color: '#fff'
          }
        },
        angleAxis: {
          type: 'value',
          clockwise: false,
          min: 0,
          max: 70,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          data: [],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        polar: {
          center: ['50%', '53%'],
          radius: [80 - tempData.length * 10 + '%', '80%']
        },
        series: [],
        legend: {
          right: '5%',
          top: 'center',
          icon: 'circle',
          orient: 'vertical',
          itemHeight: 10,
          show: true,
          data: [],
          selectedMode: false,
          textStyle: {
            color: '#ccc',
            fontSize: 15
          }
        }
      }
      tempData.forEach((item, index) => {
        option.series.push({
          type: 'bar',
          barWidth: '30%',
          data: tempData.map((subItem, subIndex) => {
            if (subIndex === index) return subItem.value
            else return 0
          }),
          coordinateSystem: 'polar',
          name: item.name,
          stack: 'a',
          roundCap: true,
          itemStyle: {
            color: tempColor[index + (tempColor.length - tempData.length)]
          },
          showBackground: true,
          backgroundStyle: {
            color: '#27333F'
          }
        })
        option.radiusAxis.data.unshift(item.name)
        option.legend.data.unshift(item.name)
      })
      const myChart2 = echarts.init(document.querySelector('.polar-bar-two'))
      myChart2.setOption(option)
    },
    setChart3 () {
      const tempData = [{
        value: 25, name: '资源加工工业'
      }, {
        value: 40, name: '轻纺工业'
      }, {
        value: 50, name: '机械电子制造业'
      }]
      const tempColor = ['#9EF869', '#7D3AF7', '#2BFDF6', '#FDC445', '#218FFD']
      const option = {
        backgroundColor: 'black',
        title: {
          text: '实现圆角环形图从外到内渲染3',
          left: 'center',
          top: '4%',
          textStyle: {
            fontSize: 20,
            color: '#fff'
          }
        },
        color: ['#9EF869', '#7D3AF7', '#2BFDF6', '#FDC445', '#218FFD'],
        angleAxis: {
          type: 'value',
          clockwise: false,
          min: 0,
          max: 70,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          data: [],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        polar: {
          center: ['50%', '53%'],
          radius: [80 - tempData.length * 10 + '%', '80%']
        },
        series: [],
        legend: {
          right: '5%',
          top: 'center',
          icon: 'circle',
          orient: 'vertical',
          itemHeight: 10,
          show: true,
          data: [],
          selectedMode: false,
          textStyle: {
            color: '#ccc',
            fontSize: 15
          }
        }
      }
      tempData.forEach((item, index) => {
        option.series.push({
          type: 'bar',
          barWidth: '30%',
          data: tempData.map((subItem, subIndex) => {
            if (subIndex === index) return subItem.value
            else return 0
          }),
          coordinateSystem: 'polar',
          name: item.name,
          stack: 'a',
          roundCap: true,
          showBackground: true,
          itemStyle: {
            color: tempColor[index + (tempColor.length - tempData.length)]
          },
          backgroundStyle: {
            color: '#27333F'
          }
        })
        option.radiusAxis.data.unshift(item.name)
        option.legend.data.unshift(item.name)
      })
      const myChart3 = echarts.init(document.querySelector('.polar-bar-three'))
      myChart3.setOption(option)
    },
    setChart4 () {
      const tempData = [{
        value: 25, name: '资源加工工业'
      }]
      const tempColor = ['#9EF869', '#7D3AF7', '#2BFDF6', '#FDC445', '#218FFD']
      const option = {
        backgroundColor: 'black',
        title: {
          text: '实现圆角环形图从外到内渲染4',
          left: 'center',
          top: '4%',
          textStyle: {
            fontSize: 20,
            color: '#fff'
          }
        },
        angleAxis: {
          type: 'value',
          clockwise: false,
          min: 0,
          max: 70,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          data: [],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        polar: {
          center: ['50%', '53%'],
          radius: [80 - tempData.length * 10 + '%', '80%']
        },
        series: [],
        legend: {
          right: '5%',
          top: 'center',
          icon: 'circle',
          orient: 'vertical',
          itemHeight: 10,
          show: true,
          data: [],
          selectedMode: false,
          textStyle: {
            color: '#ccc',
            fontSize: 15
          }
        }
      }
      tempData.forEach((item, index) => {
        option.series.push({
          type: 'bar',
          barWidth: '30%',
          data: tempData.map((subItem, subIndex) => {
            if (subIndex === index) return subItem.value
            else return 0
          }),
          coordinateSystem: 'polar',
          name: item.name,
          stack: 'a',
          roundCap: true,
          itemStyle: {
            color: tempColor[index + (tempColor.length - tempData.length)]
          },
          showBackground: true,
          backgroundStyle: {
            color: '#27333F'
          }
        })
        option.radiusAxis.data.unshift(item.name)
        option.legend.data.unshift(item.name)
      })
      const myChart4 = echarts.init(document.querySelector('.polar-bar-four'))
      myChart4.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.polar-bar{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  &-one,&-two,&-three,&-four{
    width: calc(50% - 1px);
    height: calc(50% - 1px);
  }
}
</style>
